<template>
  <div class="basic-layout">
    <router-view></router-view>
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o" to="/home/index">首页</van-tabbar-item>
      <van-tabbar-item icon="orders-o" to="/order">订单</van-tabbar-item>
      <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()

// 根据当前路由设置激活的标签
const active = ref(0)

// 监听路由变化，更新激活的标签
const updateActive = () => {
  const path = route.path
  if (path.startsWith('/home')) {
    active.value = 0
  } else if (path.startsWith('/order')) {
    active.value = 1
  } else if (path.startsWith('/user')) {
    active.value = 2
  }
}

// 初始化时设置激活的标签
updateActive()

// 监听路由变化
router.afterEach(() => {
  updateActive()
})

const onChange = (index) => {
  switch (index) {
    case 0:
      router.push('/home/index')
      break
    case 1:
      router.push('/order')
      break
    case 2:
      router.push('/user')
      break
  }
}
</script>

<style lang="scss" scoped>
.basic-layout {
  min-height: 100vh;
  display: flex;
  flex-direction: column;

  :deep(.van-tabbar) {
    background: #fff;
  }
}
</style> 